<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Dining</title>
    <link rel="stylesheet" th:href="@{/css/dining.css}" type="text/css" media="screen"/>
    <script th:src="@{/static/js/jquery-3.7.1.js}"></script>
</head>

<body>
<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a th:href="@{/main}"><img th:src="@{/images/logo-topbar.PNG}" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a th:if="${session.loginAccount != null}" th:href="@{/cart/cartForm(username=${session.loginAccount.username})}">
                <img th:src="@{/images/cart.PNG}" align="middle"/>
            </a>
            <a th:unless="${session.loginAccount != null}" th:href="@{/cart/cartForm}">
                <img th:src="@{/images/cart.PNG}" align="middle"/>
            </a>
            <img th:src="@{/images/separator.gif}" align="middle"/>

            <th:block th:if="${session.loginAccount == null}">
                <a th:href="@{/account/signOn}">Sign In</a>
                <img th:src="@{/images/separator.gif}" align="middle"/>
            </th:block>

            <th:block th:if="${session.loginAccount != null}">
                <a th:href="@{/common/signOut}">Sign Out</a>
                <img th:src="@{/images/separator.gif}" align="middle"/>
                <a th:href="@{/account/edit}" id="editAccountForm">My Account</a>
                <img th:src="@{/images/separator.gif}" align="middle"/>
                <a th:href="@{/account/log}">History</a>
                <img th:src="@{/images/separator.gif}" align="middle"/>
            </th:block>

            <a th:href="@{/help}" id="help">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form th:action="@{/catalog/search}" method="get">
                <input type="text" name="keywords" size="20" id="keyword" th:value="${searchKeyword}">
                <input type="submit" value="Search" id="submit">
            </form>
            <div id="productAutoComplete">
                <ul id="productAutoList"></ul>
            </div>
        </div>
    </div>

    <div id="QuickLinks">
        <a th:href="@{/category/view(categoryId='MAIN')}"> <img th:src="@{/images/main_cam.PNG}" /></a>
        <img th:src="@{/images/separator.gif}" />
        <a th:href="@{/category/view(categoryId='SOUTH')}"><img th:src="@{/images/south_cam.PNG}" /></a>
        <img th:src="@{/images/separator.gif}" />
        <a th:href="@{/category/view(categoryId='NEW')}"> <img th:src="@{/images/new_cam.PNG}" /></a>
    </div>

</div>

<!-- 显示错误消息 -->
<div id="Content">
    <div th:if="${messages != null and !messages.isEmpty()}" class="message" th:each="message : ${messages}" th:text="${message}"></div>
</div>

<script th:src="@{/static/js/productAuto.js}"></script>

</body>
</html>